import { Component, Vue } from 'vue-property-decorator'

import style from '../AuthorizeNew/AuthorizeNew.less'
import ApplicationTable from '@/modules/applicationTable'
import { Action } from 'vuex-class'

/**
 *组件AuthProject
 *
 * @export
 * @class 修改印章授权的应用
 * @extends {Vue}
 */
@Component<AuthProject>({
  props: {},
  computed: {},
  methods: {},
  watch: {},
})
export default class AuthProject extends Vue {
  isCancel: boolean = false // 是否为取消授权
  sealCode: string = ''
  sealName: string = ''
  sealType: string = ''
  footerHeight: number = 46
  selectApp: any[] = []
  loading: boolean = false
  count: number = 0

  @Action('project/authorizeManageSealToProject')
  authorizeManageSealToProject!: any
  @Action('project/authorizeManageSealToAllProject')
  authorizeManageSealToAllProject!: any
  @Action('project/cancelAuthorizeManageSealToAllProject')
  cancelAuthorizeManageSealToAllProject!: any
  @Action('project/cancelAuthorizeManageSealToProject')
  cancelAuthorizeManageSealToProject!: any
  @Action('project/queryManageSealAuthorizeCountBySeal')
  queryManageSealAuthorizeCountBySeal!: any

  render() {
    return (
      <div class={style.flex}>
        <div class={[[style.steps], [style.header]]} style="height:60px">
          <label>{`${this.isCancel ? '取消' : ''}`}授权对象：</label>
          <span class={style.text}>
            <span>
              <label>印章编码</label>
              <span title={this.sealCode}>{this.sealCode}</span>
            </span>
            <span>
              <label>印章名称</label>
              <span title={this.sealName}>{this.sealName}</span>
            </span>
            <span>
              <label>印章类别</label>
              <span title={this.sealType}>{this.sealType}</span>
            </span>
          </span>
        </div>
        <ApplicationTable
          onSelectChange={(val: any[]) => {
            this.selectApp = val
            this.getPaddingBottom()
          }}
          emptyText={
            this.isCancel
              ? '当前查询条件下暂无可授权的云签章应用'
              : '当前查询条件下暂无已授权的云签章应用'
          }
          multi
          isAuth={!this.isCancel}
          sealCode={this.sealCode}
          selection={this.selectApp}
          class={style.orderList}
          style={{
            top: '60px',
            height: `calc(100% - 60px - ${this.footerHeight}px)`,
          }}
          onDetail={this.projectDetail}
          onAuth={this.projectAuth}
        />
        <div class={style.pagination} ref="footer">
          <div class={style.selection}>
            <p class={style.tagName}>
              <i class="el-icon-info" />
              已选择应用
            </p>
            <div class={style.tags}>
              {this.selectApp &&
                this.selectApp.map((tag: any) => (
                  <el-tag
                    key={tag.projectId}
                    closable
                    disable-transitions={false}
                    onClose={() => this.deleteApp(tag)}
                  >
                    {tag.projectName}
                  </el-tag>
                ))}
            </div>
          </div>

          <div class={style.operations}>
            <el-button
              type="primary"
              class={['bg-color-blue', { [style.medium]: true }]}
              onClick={() => {
                this.partAuth()
              }}
              disabled={this.loading || this.selectApp.length === 0}
            >
              {this.isCancel ? `批量取消授权` : `批量授权`}
            </el-button>
            {/* {!this.isAll && ( */}
            <el-button
              type="primary"
              class={['bg-color-blue', { [style.medium]: true }]}
              onClick={this.allAuth}
              disabled={this.loading || this.count === 0}
            >
              {this.isCancel ? `全部取消授权` : `全部授权`}
            </el-button>
            {/* )} */}
            <span class={style.info}>
              当前选中<span>{this.selectApp.length}</span>个应用
            </span>
          </div>
        </div>
      </div>
    )
  }
  created() {}
  mounted() {
    const { sealCode, sealName, sealType } = this.$route.query as any
    this.sealCode = sealCode || ''
    this.sealName = sealName || ''
    this.sealType = sealType || ''
    this.isCancel = (this.$route.params.type as string) === 'cancel'
    this.getCount()
    this.getPaddingBottom()
  }
  beforeDestroy() {}

  getPaddingBottom() {
    this.$nextTick(() => {
      this.footerHeight = (
        (this.$refs.footer as any) || { offsetHeight: 46 }
      ).offsetHeight
    })
  }

  deleteApp(app: any) {
    this.selectApp = this.selectApp.filter(
      (select: any) => app.projectId !== select.projectId
    )
  }

  projectDetail(row: any) {
    this.$router.push({
      name: 'projectDetail',
      query: { id: row.projectId },
    })
  }

  projectAuth(row: any) {
    this.partAuth([row.projectId])
  }

  getCount() {
    this.queryManageSealAuthorizeCountBySeal({
      authorize: this.isCancel,
      sealCode: this.sealCode,
    }).then((res: any) => {
      this.count = res.count
    })
  }

  partAuth(projects?: string[]) {
    if ((projects || []).length === 0 && this.selectApp.length === 0) {
      this.$message.warning('请选择授权应用')

      return
    }
    const projectIds: string[] =
      projects || this.selectApp.map(app => app.projectId)
    this.loading = true
    const url = this.isCancel
      ? this.cancelAuthorizeManageSealToProject
      : this.authorizeManageSealToProject
    url({ projectIds, sealCode: this.sealCode })
      .then((res: any) => {
        this.loading = false
        this.$router.push({
          name: 'authorizeResult',
          query: {
            id: this.sealCode,
            from: 'myManagingSeal',
            cancel: this.isCancel ? '1' : undefined,
          },
        })
      })
      .catch(() => {
        this.loading = false
      })
  }

  allAuth() {
    // 全部授权
    this.$confirm(
      `确认${this.isCancel ? '取消' : ''}授权当前所有应用？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnPressEscape: false,
        closeOnClickModal: false,
        customClass: 'custom-confirm',
      }
    )
      .then(() => {
        this.confirmAuth()
      })
      .catch(() => {})
  }

  confirmAuth() {
    this.loading = true
    const url = this.isCancel
      ? this.cancelAuthorizeManageSealToAllProject
      : this.authorizeManageSealToAllProject
    url({ sealCode: this.sealCode })
      .then((res: any) => {
        this.loading = false
        this.$router.push({
          name: 'authorizeResult',
          query: {
            id: this.sealCode,
            from: 'myManagingSeal',
            cancel: this.isCancel ? '1' : undefined,
          },
        })
      })
      .catch(() => {
        this.loading = false
      })
  }
}
